<template>
  <div>
    <a class="btn" @click="toggleShow">设置头像</a>
    <my-upload
      field="img"
      method="POST"
      @crop-success="cropSuccess"
      @crop-upload-success="cropUploadSuccess"
      @crop-upload-fail="cropUploadFail"
      v-model="show"
      :width="300"
      :height="300"
      :url="UPLOAD_URL"
      img-format="png"
    ></my-upload>
    <img :src="imgDataUrl" />
  </div>
</template>
<script>
import "babel-polyfill"; // es6 shim
import Vue from "vue";
import myUpload from "vue-image-crop-upload";
export default {
  components: {
    "my-upload": myUpload,
  },
    //   props: {
    //   //图片属性数组
    //   value: Array,
    //   //最大上传图片数量

    // },
  data() {
    return {
      show: true,


      imgDataUrl: "", // the datebase64 url of created image
      //上传图片地址,开发环境上传到本地
      UPLOAD_URL: process.env.UPLOAD_URL,
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
    srcFileSet( fileName, fileType, fileSize ){
        console.log('-----srcFileSet------')
        console.log(fileName)
    },
    /**
     * crop success
     *
     * [param] imgDataUrl
     * [param] field
     */
    cropSuccess(imgDataUrl, field) {
      console.log("-------- crop success --------");
      this.imgDataUrl = imgDataUrl;
      console.log(this.imgDataUrl)
      console.log(field)
    },
    /**
     * upload success
     *
     * [param] jsonData   服务器返回数据，已进行json转码
     * [param] field
     */
    cropUploadSuccess(jsonData, field) {
      console.log("-------- upload success --------");
      console.log(jsonData);
      console.log("field: " + field);
    },
    /**
     * upload fail
     *
     * [param] status    server api return error status, like 500
     * [param] field
     */
    cropUploadFail(status, field) {
      console.log("-------- upload fail --------");
      console.log(status);
      console.log("field: " + field);
    },
  },
};
</script>